<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片</title>
    <style>
        body{
            /* 清楚默认布局 */
            margin:0;
        }
        #app{
            width:calc(100vw - 20px);
            height:calc(100vh - 20px);
            border:10px solid red;
            background-image:url(./img/favicon.png);
            /* 设置重复 */
            /* 默认 水平垂直重复 */
            /* background-repeat:repeat-x;
            background-repeat:repeat-y; */
            background-repeat:no-repeat;
            /* 设置背景图片的位置 */
            background-position: 50% 50% ;
            background-position: 50px 50px ;
            background-position: center;
            /* 设置背景图片大小 */
            background-size: contain;
            background-size: 100%;
            background:url(./img/favicon.png) no-repeat center;
            border: 10px solid red;
            border-width: 10px;
            border-style: dotted;
            border-top: 10px solid;
            border-right: 10px dashed;
            border-bottom: 10px double;
            border-left: 10px dotted;
            border-color: red;
            /* 上右下左 */
            border-color: red blue green orange;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
</html>